const element = {
  type: "h1",
  props: {
    title: "foo",
    children: "text",
  },
};

const container = document.querySelector("#container");

const node = document.createElement(element.type);
node["title"] = element.props.title;

const textNode = document.createTextNode("");
textNode["textContent"] = element.props.children;

// 先append 子元素
node.appendChild(textNode);
// 再将子元素 append 到容器上
container.appendChild(node);

// 循环遍历，将child也赛到容器上
function render(element, container) {
  const dom =
    // document.createElement(element.type)
    element.type === "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type);

  // 不是children的才是需要塞到dom上的属性
  const isProperty = (property) => property !== "children";

    Object.keys(element.props).filter(isProperty).forEach(p => {
        dom[p] = element.props[p]
    })

  element.props.children.forEach((item) => {
    render(item, dom);
  });

  container.appendChild(dom);
}


/**
 * mini-react-render code
 */

 function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map(child =>
        typeof child === "object"
          ? child
          : createTextElement(child)
      ),
    },
  }
 }

function createTextElement(text) {
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  }
}
​
function render(element, container) {
  const dom =
    element.type == "TEXT_ELEMENT"
      ? document.createTextNode("")
      : document.createElement(element.type)
​
  const isProperty = key => key !== "children"
  Object.keys(element.props)
    .filter(isProperty)
    .forEach(name => {
      dom[name] = element.props[name]
    })
​
  element.props.children.forEach(child =>
    render(child, dom)
  )
​
  container.appendChild(dom)
}
​
const Didact = {
  createElement,
  render,
}
​
/** @jsx Didact.createElement */
const element1 = (
  <div id="foo">
    <a>bar</a>
    <b />
  </div>
)
const container1 = document.getElementById("root")
Didact.render(element1, container1)